<template>
	<view class="content"> 
		<view class="contentFoot">
			<sunMenu></sunMenu> 
			<view class="query-container">
				<view class="title">成績查詢</view>
				<view class="form-item">
					<input type="text" v-model="idCard" placeholder="請輸入身份證號碼" class="input" maxlength="18" />
				</view>
				<view class="btn-container">
					<button @click="queryScore" class="query-btn">查詢成績</button>
				</view>
				<view v-if="hasQueried" class="result-container">
					<view class="no-result">
						<image src="/static/images/no-data.png" mode="aspectFit" class="no-data-img"></image>
						<text>暫無查詢結果</text>
					</view>
				</view>
			</view>
			<view class="footer">
				<text class="footer-text">© 2025 夏璽玥網路有限公司 版權所有 XIA AKOYA INC. All Rights Reserved. 統一編號90370186</text>
			</view>
		</view>
	</view>
</template>

<script>
	import sunMenu from '../components/sun-menu/sun-menu.vue' 
	export default {
		components: {
			sunMenu
		},
		data() {
			return {
				idCard: '',
				hasQueried: false
			}
		},
		onLoad() {  
		},
		onShow() {
			uni.setStorageSync("activeId",'')
		},
		methods: {
			queryScore() {
				if (!this.idCard) {
					uni.showToast({
						title: '請輸入身份證號碼',
						icon: 'none'
					})
					return
				}
				this.hasQueried = true
			}
		}
	}
</script>

<style scoped>
.content {
	min-height: 100vh;
	background-color: #f0f9f6; 
	display: flex;
	flex-direction: column;
	align-items: center;
}

.query-container {
	
	background-color: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin: auto;
	width: 90%;
	max-width: 800rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50rpx;
	color: #0abab5;
	position: relative;
}

.title::after {
	content: '';
	position: absolute;
	bottom: -15rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #0abab5;
	border-radius: 2rpx;
}

.form-item {
	margin-bottom: 40rpx;
}

.input {
	width: 100%;
	height: 90rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	transition: all 0.3s ease;
}

.input:focus {
	border-color: #0abab5;
	box-shadow: 0 0 10rpx rgba(10, 186, 181, 0.1);
}

.btn-container {
	margin: 50rpx 0;
}

.query-btn {
	background-color: #0abab5;
	color: #fff;
	border-radius: 12rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	font-weight: 500;
	transition: all 0.3s ease;
	width: 100%;
}

.query-btn:active {
	background-color: #099c98;
	transform: scale(0.98);
}

.result-container {
	margin-top: 40rpx;
	padding: 40rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	text-align: center;
}

.no-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #666;
	font-size: 28rpx;
}

.no-data-img {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.contentFoot {
	width: 100%;
	margin-top: auto;
}

.footer {
	text-align: center;
	padding: 30rpx 0;
	background-color: #fff;
}

.footer-text {
	color: #999;
	font-size: 24rpx;
}

/* 响应式布局 */
@media screen and (min-width: 768px) {
	.query-container {
		padding: 60rpx;
		margin: 60rpx auto;
	}
	
	.title {
		font-size: 48rpx;
	}
	
	.input {
		height: 100rpx;
		font-size: 32rpx;
	}
	
	.query-btn {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
	}
	
	.no-result {
		font-size: 32rpx;
	}
	
	.no-data-img {
		width: 300rpx;
		height: 300rpx;
	}
}
</style>